<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import slVehicleViolation from './components/vehicle-violation'
  import slVehicleBreakdown from './components/vehicle-breakdown'
  import slVehicleAccident from './components/vehicle-accident'
  import { useRecordStore } from '@/stores/record.js'
  import { storeToRefs } from 'pinia'
  import { truckApi } from '@/apis/task.js'

  const store = useRecordStore()
  const { recordData } = storeToRefs(store)

  // 1. 接收上一个页面传递的参数
  const startTime = ref('') // 出车时间
  onLoad((params) => {
    recordData.value.id = params.transportTaskId
    recordData.value.startTime = params.actualDepartureTime
  })

  // 2. 回车时间
  // const endTime = ref('')

  const onSubmit = async () => {
    // 2.1 校验
    // 2.2 处理数据
    recordData.value.accidentImagesList =
      recordData.value.accidentImagesList.map((item) => {
        return { url: item.url }
      })

    recordData.value.faultImagesList = recordData.value.faultImagesList.map(
      (item) => {
        return { url: item.url }
      }
    )

    // console.log(recordData.value)

    // 2.3 调用接口
    const { code } = await truckApi(recordData.value)
    if (code !== 200) return uni.utils.toast('回车登记失败')

    // 2.4 清空仓库数据
    store.clearRecordData()

    uni.reLaunch({
      url: '/pages/task/index',
    })
  }
</script>
<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view class="scroll-view-wrapper">
        <uni-list class="base-info">
          <!-- 出车时间 -->
          <uni-list-item
            title="出车时间"
            show-arrow
            :right-text="recordData.startTime"
          />
          <!-- 回车时间 -->
          <uni-list-item show-arrow title="回车时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="recordData.endTime">
                <view class="picker-value">{{
                  recordData.endTime || '请选择'
                }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
        </uni-list>
        <!-- 交通违章组件 -->
        <sl-vehicle-violation></sl-vehicle-violation>
        <!-- 车辆故障组件 -->
        <sl-vehicle-breakdown></sl-vehicle-breakdown>
        <!-- 交通事故组件 -->
        <sl-vehicle-accident></sl-vehicle-accident>
      </view>
    </scroll-view>
    <view class="toolbar">
      <button class="button" @click="onSubmit">提交登记</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
